<template>
  <div class="info-input">
    <header><span class="backup" @click="backup">&laquo;</span>入职信息录入</header>

    <div class="middle">
      <div class="basic-info">
        <div class="title">
          基础信息
        </div>
      </div>
      <ul>
        <li><input class="input" placeholder="姓名" v-model="emp.employeeName"></li>
        <li><input class="input" placeholder="性别" v-model="emp.employeeGender"></li>
        <li><input class="input" placeholder="身份证号" v-model="emp.idcardNo"></li>
        <li><input class="input" placeholder="出生日期" v-model="emp.birthDate"></li>
        <li><input class="input" placeholder="加入本单位时间" v-model="emp.entryTime"></li>
        <li>
          <select v-model="emp.employeeType">
            <option value="#">员工类型</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">用工性质</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="来源"></li>
        <li>
          <select>
            <option value="#">分配状态</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">员工类别</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="人员组"></li>
        <li>
          <select>
            <option value="#">户口类别</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">国籍</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">民族</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="籍贯"></li>
        <li><input class="input" placeholder="出生地"></li>
        <li><input class="input" placeholder="参加工作时间"></li>
        <li><input class="input" placeholder="参加移动时间"></li>
        <li><input class="input" placeholder="社会保险号"></li>
        <li>
          <select>
            <option value="#">婚姻状况</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">健康状况</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">国家</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">省直辖市</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">市</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="地址行"></li>
        <li><input class="input" placeholder="邮编"></li>
        <li><input class="input" placeholder="移动电话"></li>
        <li><input class="input" placeholder="家庭电话"></li>
        <li><input class="input" placeholder="办公电话"></li>
        <li><input class="input" placeholder="email邮箱"></li>
        <li>
          <select>
            <option value="#">政治面貌</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="加入时间"></li>
        <li>
          <select>
            <option value="#">学历</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">毕业情况</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">最高学位标识</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">参加工作时学历标识</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">学位类别</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">学位</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="学位授予时间"></li>
        <li><input class="input" placeholder="入学时间"></li>
        <li><input class="input" placeholder="毕肄业时间"></li>
        <li>
          <select>
            <option value="#">学制</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="毕业学校"></li>
        <li><input class="input" placeholder="所学专业"></li>
        <li>
          <select>
            <option value="#">学习形式</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">所学专业分类</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">是否全日制</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">是否全职</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="职位编码"></li>
        <li><input class="input" placeholder="职位名称"></li>
        <li>
          <select>
            <option value="#">职位级别</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li>
          <select>
            <option value="#">职等</option>
            <option value="#">类别1</option>
            <option value="#">类别2</option>
            <option value="#">类别3</option>
          </select>
        </li>
        <li><input class="input" placeholder="工资单"></li>
        <li><input class="input" placeholder="雇主"></li>
        <li><input class="input" placeholder="纳税地区"></li>
        <li><input class="input" placeholder="社会保险/PHF 摊缴地区"></li>
        <li><input class="input" placeholder="户名"></li>
        <li><input class="input" placeholder="开户行"></li>
        <li><input class="input" placeholder="银行账号"></li>
        <li><input class="input" placeholder="原社保公积金所在地"></li>
        <li><input class="input" placeholder="原单位社保缴费基数"></li>
        <li><input class="input" placeholder="原单位社保停保时间"></li>
        <li><input class="input" placeholder="社保公积金新增开始时间"></li>
      </ul>
      <div class="add-button">
        <button type="button" @click="save">确 定</button>
      </div>

      <div class="edu">
        <div class="title">
          教育经历
        </div>
        <v-edu-list></v-edu-list>
      </div>
      <!--<div class="work">-->
        <!--<div class="title">-->
          <!--工作经历-->
        <!--</div>-->
      <!--</div>-->
    </div>

    <footer>中移（成都）产业研究院</footer>
  </div>
</template>

<script>
  import EduList from './EduList';

  export default {
    name: 'Main_',
    components: {
      'v-edu-list': EduList
    },
    data() {
      return {
        emp: {}
      }
    },
    created() {
      // TODO
    }
    ,methods: {
      save() {
        console.log(this.emp)
      },
      backup() {
        this.$router.push({"path": "/main"});
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style-type: none;
  }

  body {
    font-family: 微软雅黑;
    font-size: 14px;
  }

  a {
    text-decoration: none;
    color: #595959;
  }

  a:hover {
    text-decoration: underline;
  }

  header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #1389D3;
    color: #FFFFFF;
    position: fixed;
    left: 0px;
    top: 0px;
  }

  header .backup {
    float: left;
    display: inline-block;
    width: 60px;
    font-size: 40px;
  }

  .middle input {
    font-family: 微软雅黑;
    width: 89%;
    height: 40px;
    line-height: 40px;
    border: none;
    background-color: #F1F1F1;
    margin-bottom: 10px;
    padding-left: 1%;
    border-radius: 4px;
  }

  .middle select {
    font-family: 微软雅黑;
    width: 90%;
    height: 40px;
    line-height: 40px;
    border: none;
    background-color: #F1F1F1;
    margin-bottom: 10px;
    border-radius: 4px;
    color: #9F9F9F;
  }

  .middle {
    margin-top: 80px;
  }

  .middle, .middle ul, .middle ul li {
    width: 100%;
    overflow: hidden;
    text-align: center;
  }

  .add-button button {
    width: 90%;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #1389D3;
    border: none;
    text-align: center;
    border-radius: 4px;
    font-family: 微软雅黑;
  }

  footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #595959;
    margin-top: 30px;
  }

  .basic-info, .edu, .work {
    text-align: left;
    width: 89%;
    margin: 0 auto 10px;
  }

  .edu, .work {
    margin-top: 20px;
  }

  .title {
    font-size: 18px;
    line-height: 36px;
    font-weight: bold;
  }

  /* edu **/
</style>
